<template>
  <div class="app-container">
    <el-form :model="updateUser,dp" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="lname">
        <el-input v-model="updateUser.lname"></el-input>
      </el-form-item>

      <el-form-item label="真实姓名" prop="rname">
        <el-input v-model="updateUser.rname"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="updateUser.age"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="updateUser.phone"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="card">
        <el-input v-model="updateUser.card"></el-input>
      </el-form-item>
      <el-form-item label="住址" prop="address">
        <el-input v-model="updateUser.address"></el-input>
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="updateUser.department" placeholder="请选择部门" @change="findPosition(updateUser.department)">
          <el-option v-for="item in dp.departmentList" :label="item.text" :value="item.id"></el-option>
          <!--          <el-option :label="user.departmentList" :value="user.departmentList"></el-option>-->
        </el-select>
      </el-form-item>

      <el-form-item label="职位">
        <el-select v-model="updateUser.position" placeholder="请选择职位">
          <el-option v-for="item in dp.positionList" :label="item.text" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-col :span="11">
          <el-form-item>
            <el-date-picker type="date" placeholder="选择日期" v-model="updateUser.birthday"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="入职时间" prop="entrytime">
        <el-col :span="11">
          <el-form-item>
            <el-date-picker type="date" placeholder="选择日期" v-model="updateUser.entrytime"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="updateUser.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否启用">
        <el-radio-group v-model="updateUser.isdisable">
          <el-radio label="启用"></el-radio>
          <el-radio label="禁用"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import useManagerApi from "@/api/userManager";

export default {
  name: "saveUser",
  data() {
    return {
      dp: {
        departmentList: [{
          text: '',
          id: ''
        }],
        positionList: [{
          text: '',
          id: ''
        }],
        position: '',
        did: '',
        postid: '',
      },
      updateUser: {
        lname: '',
        lpass: '',
        rname: '',
        age: '',
        gender: '',
        address: '',
        phone: '',
        birthday: '',
        card: '',
        entrytime: '',
        department: '',
        position: '',
        // did: '',
        // postid: '',
        isdisable: '',
      },

      rules: {
        lname: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        lpass: [
          {required: true, message: '请输密码', trigger: 'blur'},
          {min: 8, max: 16, message: '长度在 8 到 16个字符', trigger: 'blur'}
        ],
        rname: [
          {required: true, message: '请输入真实姓名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        card: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {min: 18, max: 18, message: '长度为18位', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11位', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {min: 2, max: 2, message: '长度为2位', trigger: 'blur'}
        ],
        birthday: [
          {type: 'date', required: true, message: '请选择出生日期', trigger: 'change'}
        ],
        entrytime: [
          {type: 'date', required: true, message: '请选择入职时间', trigger: 'change'}
        ],
        address: [
          {required: true, message: '请输入家庭住址', trigger: 'blur'}
        ],
        position: [
          {required: true, message: '请选择职位', trigger: 'blur'}
        ],
        department: [
          {required: true, message: '请选择部门', trigger: 'blur'}
        ],
        gender: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ]
      }
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.upUser();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    getDepartment() {
      useManagerApi.getDepartment().then((response) => {
        console.log("获取部门列表成功！");
        this.dp.departmentList = response.data.items;

        console.log(this.dp.departmentList);
        console.log(this.dp.departmentList[0].id)

      })
    },


    //放入部门id查职位
    findPosition(pid) {
      useManagerApi.getPosition(pid).then((response) => {


        console.log("获取职位列表成功！");
        this.dp.positionList = response.data.items;
        console.log(this.dp.positionList);
      }).catch(e => {
        console.log(e)
      })
    },


    getuserByid(id) {

      useManagerApi.findByIdUser(id).then((Response) => {
        this.updateUser = Response.data.updateUser;
      });
    },

    upUser() {
      useManagerApi.updateUser(this.updateUser).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({path: "/systemManager/userManager"});

      });

    }


  }, created() {

    const id = this.$route.params.id;

    this.getuserByid(id)
    this.getDepartment()

  },


};
</script>

<style>

</style>
